<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="Expires" content="0">
		<meta http-equiv="Pragma" content="no-cache">
		<meta http-equiv="Cache-control" content="no-cache">
		<meta http-equiv="Cache" content="no-cache">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<meta name="renderer" content="webkit">
		<link href='/page/assets/css/boot/bootstrap.min.css' media='all' rel='stylesheet' type='text/css' />
		<style>
			html,body{
				height:100%;
			}
			.h100{
				height:100%;
			}
		</style>
	</head>
	<body>
		<div class="row">
			<div class="col-xs-12">
				<h3>
					<span>当前登录用户：</span>
					<strong class="userName">测试</strong>
					<div class="pull-right">
						<span>当前时间：</span>
						<strong class="nowTime"></strong>
					</div>
				</h3>
			</div>
		</div>
		<div class="row h100">
			<div class="col-xs-6 h100">
				<div id="container" class="h100"></div>
			</div>
			<div class="col-xs-6 h100">
				<div id="container2" class="h100"></div>
			</div>
		</div>
	<script type="text/javascript" src="/page/assets/js/jquery/jquery.min.js" ></script>
	<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
	<script src='/page/assets/js/boot/bootstrap.min.js' type='text/javascript'></script>
	<script src="/page/assets/js/dqq_bong.js"></script>
	<script>
		let userInfo = window.localStorage.getItem("tokenInfo");
		if(userInfo){
            userInfo = JSON.parse(userInfo);
		    $(".userName").text(userInfo.realName);
		}
        $(".nowTime").text(new Date().Format("yyyy-MM-dd hh:mm:ss"))
		setInterval(()=>{
		    $(".nowTime").text(new Date().Format("yyyy-MM-dd hh:mm:ss"))
		},1000)
	</script>
	<script>
        var myChart = echarts.init($("#container")[0]);
        var app = {};
        option = null;
        option = {
            backgroundColor: 'white',

            title: {
                text: '本月各学院缺勤人数占比',
                left: 'center',
                top: 20,
                textStyle: {
                    color: 'black'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 50,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'学院',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        {value:335, name:'软件学院'},
                        {value:310, name:'计通学院'},
                        {value:274, name:'经管学院'},
                        {value:235, name:'政法学院'},
                        {value:400, name:'国教学院'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'black'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'black'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
	</script>
	<script>
        var myChart = echarts.init($("#container2")[0]);
        app.title = '考勤率展示';

        var colors = ['#5793f3', '#d14a61', '#675bba'];


        option = {
            color: colors,

            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {
                data:['本月考勤率', '上月考勤率']
            },
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '考勤率  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: ["第一周","第二周","第三周","第四周"]
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return '考勤率  ' + params.value
                                    + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                            }
                        }
                    },
                    data: ["第一周","第二周","第三周","第四周"]
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name:'本月考勤率',
                    type:'line',
                    xAxisIndex: 1,
                    smooth: true,
                    data: [0.09,0.14,0.111,0.12]
                },
                {
                    name:'上月考勤率',
                    type:'line',
                    smooth: true,
                    data: [0.03,0.12,0.16,0.141]
                }
            ]
        };

        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
	</script>
	</body>
</html>